<template>
    <div id="home">
        <nav-bar class="home-nav">
            <div slot="center">购物街</div>
        </nav-bar>
        <!-- tab-control对应 流行、新款、精选-->
        <tab-control :titles="titles" class="tab-control" @tabClick="tabClick" ref="tabControl1" v-show="isTabFixed"></tab-control>
        <scroll class="content" ref="Scroll" :obj="obj" @scrollPosition="scrollPostion" @pullingUP="loadMove">
            <home-swiper :banners="banners" @swiperImgLoad="swiperImgLoad"></home-swiper>
            <home-recommend-view :recommends="recommends" @imgLoaded="recommendImgLoaded"></home-recommend-view>
            <feature @imgLoaded="featureImgLoad"></feature>
            <tab-control :titles="titles" @tabClick="tabClick" ref="tabControl2" v-show="!isTabFixed"></tab-control>
            <goods-list :goods="goods[type].list"></goods-list>
        </scroll>
        <!-- 组件不能直接监听点击事件（系统自带的事件）需要加修饰符.native -->
        <back-top @click.native="backClick" v-show="isShow"></back-top>
    </div>
</template>

<script>
    import NavBar from 'components/common/navbar/NavBar'
    import {getHomeMultidata,getHomeGoods} from 'network/home'
    import HomeSwiper from './childComponents/HomeSwiper'
    import HomeRecommendView from './childComponents/HomeRecomendView'
    import Feature from './childComponents/Feature'
    import TabControl from 'components/content/tabControl/TabControl'
    import GoodsList from 'components/content/goods/GoodsList'
    import Scroll from 'components/common/scroll/Scroll'
    import BackTop from 'components/content/backtop/BackTop'
    import {debounce} from 'common/utils'

    export default {
        name:'Home',
        components:{
            NavBar,
            HomeSwiper,
            HomeRecommendView,
            Feature,
            TabControl,
            GoodsList,
            Scroll,
            BackTop,
        },
        data(){
            return {
                banners:[],
                recommends:[],
                titles:['流行','新款','精选'],
                //数据模型
                goods:{
                    'pop':{page:0,list:[]},
                    'new':{page:0,list:[]},
                    'sell':{page:0,list:[]}
                },
                type:'pop',
                //配置BScroll   (在传值的时候，如果是驼峰写法应该写成-形式)
                obj:{click:true,probeType:2,pullUpLoad:true}, // pullUpLoad 是否可以上拉
                //控制backto是否显示
                isShow:false,
                tabOffsetTop:0,
                isTabFixed:false,
                Y:0,
                imageLoadListener:null,
                swiperImg: false,
                recommendImg: false,
                featureImg: false,
            }
        },

        computed: {
            allimgloaded() {
                return this.swiperImg && this.recommendImg && this.featureImg;
            }
        },
        
        watch: {
            allimgloaded() {
                this.tabOffsetTop = this.$refs.tabControl2.$el.offsetTop;
            }
        },

        created () {
            //1、请求数据轮播图
            getHomeMultidata().then(res=>{
                this.banners = res.data.data.banner.list;
                this.recommends = res.data.data.recommend.list
            })

            //2、请求商品数据
            this.getHomeGoods('pop');
            this.getHomeGoods('new');
            this.getHomeGoods('sell');
        },
        mounted () {
            const refresh = debounce(this.$refs.Scroll.refresh,200);
            //监听图片加载成功
            this.imageLoadListener = ()=>{
                refresh();
            }
            this.$bus.$on('itemImageLoad',this.imageLoadListener)  // 监听事件， 触发回调函数

        },
        activated () {
          this.$refs.Scroll.refresh()
          this.$refs.Scroll.scrollTo(0,this.Y,0);  // 由于使用了better-scroll导致了keep-alive失效， 所以用这方法进行设置页面当前位置
        },
        deactivated () {
            this.Y = this.$refs.Scroll.getY();  // 记录页面当前位置
            //有一个全局的事件总线，当离开了应该消除
            this.$bus.$off('itemImageLoad',this.imageLoadListener)
        },
        methods: {
            getHomeGoods(type){
                const page = this.goods[type].page+1
                getHomeGoods(type,page).then(res=>{
                    this.goods[type].list = [...res.data.data.list,...this.goods[type].list]
                    this.goods[type].page+=1;
                    //由于bscroll默认只能上拉加载更多一次，所以必须手动添加finshPullUp()(封装后的)
                    this.$refs.Scroll.finishPullUp();
                })
            },
            //点击小标题如何获取对应的图片信息：使用子传父的形式，传递index，使用index判断改使用那种类型
            tabClick(index){
                if(index==0) this.type = 'pop';
                else if(index==1) this.type = 'new';
                else this.type = 'sell';

                //保持两个tabcontrol的当前选项一样 （每个组件都是一个单独的内存地址）
                this.$refs.tabControl1.currentIndex = index;
                this.$refs.tabControl2.currentIndex = index;
            },
            backClick(){
                // this.$refs.Scroll.scroll.scrollTo(0,0,500)
                this.$refs.Scroll.scrollTo(0,0);
            },
            // 滚动的时候触发
            scrollPostion(position){
                //判断backtop是否显示
                this.isShow = position.y<-1000; 

                //有bug
                this.isTabFixed = (-position.y) > this.tabOffsetTop-40;
            },
            loadMove(){
                this.getHomeGoods(this.type)
                //scroll自动重新计算课滚动区域
                // this.$refs.Scroll.refresh();
            },
            //轮播图加载完成后，获取tabControl离顶部距离
            swiperImgLoad(){
                //$el：获取组件的dom元素
                // this.tabOffsetTop = this.$refs.tabControl2.$el.offsetTop;
                this.swiperImg = true;
            },

            recommendImgLoaded() {
                this.recommendImg = true;
            },

            featureImgLoad() {
                this.featureImg = true;
            }
        }
    }
</script>

<style scoped>
    #home{
        /* 给nav留出来的位置 */
        /* padding-top: 44px; */
        
    }
    .home-nav{
        background-color: var(--color-tint);
        color: #fff;
        /* margin: 0; */
        /* position: fixed;
        left: 0;
        right: 0;
        top: 0;
        z-index: 9; */
    }

    /* .tabcontrol{
        position: sticky;
        top: 44px;
        z-index: 9
    } */

    .tab-control{
        position: relative;
        z-index: 12;
    }

    .content{
        /* 确定滚动区域 第一种方法*/
        height: calc(100vh - 93px);
        overflow: hidden;

        /* 第二种方法：设置.content为绝对定位，#home为相对定位，设置top:44px,bottom:49px,其他两值为0 */
        /* 这种方法有个问题是：.content脱离了文档流，下面东西会跑上来 */
    }
</style>